<?php

$html = <<< EOF
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Chat</title>
    <style>
    .chat {
        width: 80%;
        height: 200px;
        border: 1px #F00 solid;
        overflow-y: scroll;
    }
    </style>
</head>
<body>
    <div class="chat" id="chat"></div>
    <div>
    <label for="content">内容:</label>
    <input type="text" id="content" name="content" />
    <div><button id="send">发送</button></div>
    <script>
        var btn = document.getElementById('send');
        var chat = document.getElementById('chat');
        var user = document.getElementById('user');
        var content = document.getElementById('content');

        var ws = new WebSocket('ws://p:9999');
        ws.onopen = function() {
            console.log("connect success!");
        };

        ws.onmessage = function(e) {
            if (e.data.length != 0) {
                chat.innerHTML += e.data + "<br />";
                chat.scrollTop = chat.scrollHeight;

            }
        }

        ws.onclose = function() {
            console.log("connect close!");
        };

        btn.onclick = function() {
            if (content.value.length == 0) {
                alert('请填写用户名或内容!');
                return true;
            }
            ws.send(content.value);
        };

    </script>
</body>
</html>
EOF;

echo $html;
